﻿@model  List<FTBS.Models.Entities.Film> 

@{
    ViewBag.Title = "Suất chiếu";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var isFirstTimeLoad = (bool)ViewBag.IsFirstTimeLoad;
}
<div>
    <div style="margin-top: 4px; background-color: #4390df !important; height:40px">
        <button class="btn warning" style="width:90px; height:30px; padding-top: 0px; margin-top: 5px;  font-size: 12px;">
            @Html.ActionLink("Theo phim", "Index", "Schedule")
        </button>
        <button class="btn warning" style="width:90px; height:30px; padding-top: 0px; margin-top: 5px; font-size: 12px;">
            @Html.ActionLink("Theo rạp", "ScheduleTheater", "Schedule")
        </button>
    </div>

    <div style="overflow: auto; background-color: #4390df !important; margin-top:4px;height:45px ">
        <div style="float: left; margin-left: 13px; overflow:auto; margin-top:4px">
            <img src="~/Image/Theater/film_icon.png" style="width:30px; height:30px; float: left;"/>
            <h2 style="color: black !important; font-weight: bold; float: left; margin-left:10px; font-size:20px; margin-top:2px; color:white">PHIM</h2>
        </div>
        <div style="float: left; margin-left: 250px; overflow:auto; margin-top:4px">
            <img src="~/Image/Theater/HouseBlack.png"  style="width:30px; height:30px; float: left;"/>
            <h2 style="color: black !important; font-weight: bold; float: left; margin-left:10px; font-size:20px; margin-top:2px; color:white">RẠP CHIẾU</h2>
        </div>
        <div style="float: left; margin-left: 230px; overflow:auto; margin-top:4px">
            <img src="~/Image/Theater/clock.png"  style="width:30px; height:30px; float: left;"/>
            <h2 style="color: black !important; font-weight: bold; float: left; margin-left:10px; font-size:20px; margin-top:2px; color:white">GIỜ CHIẾU</h2>
        </div>
    </div>

    <div style="overflow: auto; background-color: white; margin-top: 2px; height: 480px;">
        <div style="float: left; height: 430px; width: 360px; overflow-x: auto; border-right:solid 1px #4390df">
            <div class="grid">
                @foreach (var film in Model)
                {
                    <div class="row">
                        <div class="span5">
                            <div class="listview">
                                @if (Model.IndexOf(film) == 0 && isFirstTimeLoad)
                                {
                                    <a href="#" class="list selected" id="filmItem @film.FilmId"  onclick="ChangeType(@film.FilmId)">
                                        <div class="list-content" onclick="loadTheaterByFilmId(@film.FilmId)">
                                            <img src="~/Image/FilmImage/@film.ImageURL" class="icon" />
                                            <div class="data">
                                                <span class="list-title" style="font-weight: bold; font-size: 14px">@film.Name</span>
                                                <button class="button mini danger">@film.Format.FormatName</button>
                                            </div>
                                        </div>
                                    </a>
                                }
                                else
                                {
                                    <a href="#" class="list" id="filmItem @film.FilmId"  onclick="ChangeType(@film.FilmId)">
                                        <div class="list-content" onclick="loadTheaterByFilmId(@film.FilmId)">
                                            <img src="~/Image/FilmImage/@film.ImageURL" class="icon" />
                                            <div class="data">
                                                <span class="list-title" style="font-weight: bold; font-size: 14px">@film.Name</span>
                                                <button class="button mini danger">@film.Format.FormatName</button>
                                            </div>
                                        </div>
                                    </a>
                                }
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>

        <div style="float: left; height: 430px; width: 360px; overflow-x: auto; border-right:solid 1px #4390df">
            <div id="listTheater">
                @Html.Partial("TheatersByFilm", (List<FTBS.Models.Entities.Theater>)ViewBag.ListTheater)
            </div>
        </div>
        <div style="float: left; height: 430px; overflow-x: auto; margin-top:28px; margin-left:5px">
            <div id="listShowTime">
                @Html.Partial("ShowTimeOfTheater", (List<FTBS.Models.Entities.Concert.ShowTimeConcertEntity>)ViewBag.ListShowTime)
            </div>
        </div>
    </div>
</div>

<script>
    function ChangeType(filmId) {
        var idTag = "filmItem" + " " + filmId;
        document.getElementById(filmId)
        var classValue = document.getElementById(idTag).getAttribute("class");
        if (classValue == "list selected") {
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
        else {
            $("a[id^='filmItem']").attr('class', 'list');
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
    }
</script>


